import React, { useState } from "react";
import { Button, Swiper } from "react-vant";
import { useBoolean } from "ahooks";
import startUrl from "./images/启动页.png";
import url1 from "./images/引导页1.png";
import url2 from "./images/引导页 2.png";
import url3 from "./images/引导页 3.png";
import url4 from "./images/引导页 4.png";
import url5 from "./images/引导页5.png";
import style from "./style.module.css";
const banners = [startUrl, url1, url2, url3, url4, url5];

export const StartPage: React.FC = () => {
  const [show, { setFalse }] = useBoolean(true);

  return (
    <Swiper
      style={{ zIndex: 999 }}
      initialSwipe={0}
      rubberband={false}
      loop={false}
      className={show ? style["swiper"] : `${style["swiper"]} ${style["none"]}`}
    >
      {banners.map((v, i) => {
        return (
          <Swiper.Item key={i}>
            <img
              src={v}
              className={style["img"]}
              onClick={() => i === banners.length - 1 && setFalse()}
            />
          </Swiper.Item>
        );
      })}
    </Swiper>
  );
};
